<template>
	<view class="page">
		<pageheader :setting="settingdata"></pageheader>
		<view class="select">
			<text class='iconfont icon-dizhi1'></text>
			<input @input="getplace" class="input" placeholder="搜索" v-model="address.city" />
		</view>
		<view class="screenList" :style="'top:'+navH+'px;'" v-if="selectshow&&screenList.length>0">
			<block v-for="(item,index) in screenList" :key="index">
				<view class="li" @click="setaddress(item)">{{item.adname}}{{item.address}}{{item.name}}</view>
			</block>
		</view>
		<view class="occupy" v-if="selectshow&&screenList.length>0" @click="selectshow=false"></view>
		<map class="map" v-if="!selectshow" :style="'top:'+navH+'px;height:calc(100% - '+navH+'px)'" scale="16"
			:latitude="address.lat" :longitude="address.long" :markers="covers" @callouttap="goshop"
			@regionchange="regionchange" @markertap="markertap">

			<view class="coverbox" v-if="showshop">
				<view class="shopinfo">
					<view class="flex_bet_align">
						<view class="flex">
							<image :src="shopInfo.image" class="coimg"></image>
							<view class="title">
								<view class="clamp1">
									{{shopInfo.shop_name}}的苗店
								</view>
								<view class="clamp1 bisine">
									主营业务: {{shopInfo.business}}
								</view>
							</view>
						</view>
						<!-- <view class="distan">
							6公里
						</view> -->
						<view class="closebox" @click="showshop=false">
							<view class="icons icon-guanbi"></view>
						</view>
					</view>
					<view class="flex_bet_align cobtn">
						<view class="flex_align" @click="dialing(shopInfo.client_uid,shopInfo.mobile)">
							<view class="iconfont icon-dianhua1 text"></view>
							打电话
						</view>
						<view class="flex_align" @click="openmap">
							<view class="icons icon-chuzuche text"></view>
							去这里
						</view>
					</view>
				</view>
			</view>
		</map>
	</view>
</template>

<script>
	import App from '@/App.vue';
	var _this, $paginator, shak;
	export default {
		data() {
			return {
				navH: 0,
				settingdata: {
					name: '地图找苗',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "mapstation"
				},
				// 当前的位置信息
				address: {},
				lon: "",
				lat: "",
				// 标记点
				covers: [],
				// 输入地址联想结果
				screenList: [],
				// 是否显示联想地址
				selectshow: false,
				// 输入框的内容
				point: "",
				// 后台获取到的地址
				list: [],
				shopInfo: {},
				showshop: false

			}
		},
		onLoad(e) {
			_this = this
			_this.navH = (App.globalData.navHeight) + 40;
			_this.address = wx.getStorageSync("address")
			_this.lat = wx.getStorageSync("address").lat
			_this.lon = wx.getStorageSync("address").long
			_this.point = wx.getStorageSync("address").city
			_this.getdata()
		},
		methods: {
			// 获取数据
			getdata() {
				_this.$api.get("mapseeksapling", {
					lon: _this.lon,
					lat: _this.lat
				}).then(data => {
					let list = _this.list
					let covers = _this.covers
					data.forEach((item, index) => {
						let repetition = true
						_this.list.forEach((item2, index2) => {
							if (item.id == item2.id) {
								repetition = false
							}
						})
						if (repetition) {
							list.push(item)
							covers.push({
								"width": "30",
								"height": "30",
								"longitude": item.lon,
								"latitude": item.lat,
								"id": item.client_uid,
								"iconPath": item.avatar,
								"callout": {
									content: '前往' + item.shop_name + '的店铺',
									color: "#000000",
									fontSize: "14",
									borderRadius: "5",
									bgColor: "#FFFFFF",
									padding: "5",
									display: "BYCLICK",
									textAlign: "center"
								}
							})
						}
					})
					_this.list = list
					_this.covers = covers
				});
			},
			//点击地图lable跳转到门店 获取门店
			goshop(e) {
				console.log(e)
				uni.navigateTo({
					url: "/home/station/stationpage?id=" + e.detail.markerId
				})
			},
			// 输入框联想地址
			getplace: function(e) {
				let searchKey = e.detail.value;
				searchKey = !searchKey || searchKey == ' ' ? '' : searchKey;
				// 显示地址
				_this.selectshow = true
				// 请求筛选
				var url = 'https://restapi.amap.com/v3/place/text?key=' + App.mapwebkey + '&keywords=' + searchKey;
				wx.request({
					url: url,
					method: 'GET',
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					success: function(res) {
						let data = res.data;
						_this.screenList = data.status == 1 ? data.pois : [];
					},
					fail: function(res) {
						wx.showModal({
							title: "错误提示",
							content: "检索失败",
							showCancel: false
						})
					}
				})
			},
			// 点击联想位置返回经纬度 附近的将进行重新搜索
			setaddress(item) {
				_this.address.city = item.adname + item.address + item.name
				_this.address.long = item.location.split(',')[0]
				_this.address.lat = item.location.split(',')[1]
				_this.selectshow = false
				_this.list = []
				_this.getdata()
				_this.showshop = false
			},
			// 根据经纬度往返回附近商家
			regionchange(e) {
				if (e.type == "end") {
					if (!_this.shake) {
						_this.lon = parseFloat(e.detail.centerLocation.longitude).toFixed(4)
						_this.lat = parseFloat(e.detail.centerLocation.latitude).toFixed(4)
						_this.getdata()
						_this.shake = true
						setTimeout(function() {
							_this.shake = false
						}, 1500)
					}
				}
			},

			markertap(e) {
				console.log(e.detail.markerId)
				_this.$api.get("myshop", {
					other_uid: e.detail.markerId
				}).then(data => {
					_this.shopInfo = data
					_this.showshop = true

					// _this.settingdata.name = data.shop_name
				});
			},
			//拨号并记录
			dialing(client_uid, mobile) {
				_this.$api.post("calllog", {
					calllog_uid: client_uid,
					call_type: 3
				}).then(data => {
					_this.$plug.dialing(mobile)
				});
			},

			openmap() {
				let shop = _this.shopInfo
				uni.openLocation({
					latitude: parseFloat(shop.lat),
					longitude: parseFloat(shop.lon),
					name: shop.shop_name + '的店铺',
					address: shop.address,
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #EEEEEE;
		min-height: 100vh;
	}

	.map {
		position: fixed;
		left: 0;
		width: 100%;
	}

	.select {
		width: 100%;
		background-color: #FFFFFF;
		line-height: 80rpx;
		height: 80rpx;
		padding: 0 3%;

		.iconfont {
			font-size: 32rpx;
			float: left;
			width: 10%;
			display: inline-block;
			text-align: center;
		}

		input {
			width: 84%;
			line-height: 80rpx;
			height: 80rpx;
			padding: 0 3%;
		}
	}

	.screenList {
		position: absolute;
		left: 5%;
		width: 90%;
		background-color: #FFFFFF;
		max-height: 60vh;
		padding: 10rpx 3%;
		overflow: auto;
		z-index: 5;

		.li {
			line-height: 60rpx;
			border-bottom: 1rpx solid #EEEEEE;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 30rpx;
		}
	}

	.occupy {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		z-index: 1;
	}

	.coverbox {
		background: #fff;
		position: fixed;
		width: 100%;
		height: 480rpx;
		bottom: 0;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: env(safe-area-inset-bottom);

		.shopinfo {
			margin: 30rpx;
			font-size: 38rpx;

			.title {
				width: 370rpx;

				.bisine {
					font-size: 28rpx;
					margin-top: 20rpx;
				}
			}

			.coimg {
				width: 160rpx;
				height: 160rpx;
				margin-right: 30rpx;
				border-radius: 10rpx;
			}
		}

		.cobtn {
			margin-top: 30rpx;
			padding-top: 30rpx;
			font-size: 32rpx;
			border-top: 1px solid #bbb;

			.text {
				background: #EBF9F5;
				margin-right: 10rpx;
			}
		}

		.distan {
			font-size: 26rpx;
		}

		.closebox {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
		}
	}
</style>
